<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: chenju
 * @LastEditTime: 2023-01-10 15:45:44
-->
<template>
  <CDrawer
    v-model="dialogVisible"
    title="用户详情"
    direction="rtl"
    size="default"
    @close="dialogVisible = false"
  >
    <div class="detail-user-container g-flex--column" v-if="dialogVisible">
      <CDetailCellGroup title="基本信息" class="g-mt8">
        <CDetailCellItem label="用户名称" :value="props.info?.realName" />
        <CDetailCellItem label="登录邮箱" :value="props.info?.username" />
        <CDetailCellItem label="手机号" :value="props.info?.phone" />
        <CDetailCellItem label="工号" :value="props.info?.employeeNo" />

        <CDetailCellItem label="用户角色">
          {{ empty(transformObjectToValueStr(props.info?.role || {}, '、')) }}
        </CDetailCellItem>
      </CDetailCellGroup>
      <div class="mainTb g-flex-1 g-flex--column" v-loading="loading">
        <CBoxTitle title="组织归属"></CBoxTitle>
        <el-scrollbar>
          <div class="user-tree-wrapper g-flex-1">
            <GTreeUserRole
              :data="treeData"
              ref="rootTree"
              show-checkbox
              node-key="id"
              check-strictly
              :props="treeProps"
              :default-expanded-keys="checkedKeys"
              :default-checked-keys="checkedKeys"
            />
          </div>
        </el-scrollbar>
      </div>
    </div>
  </CDrawer>
</template>
<script lang="ts">
export default {
  name: 'UserDetail'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch } from 'vue';
import { getUserTreeList } from '@/apis/system/user';
import { empty, transformObjectToValueStr } from '@/utils/index';
import type {
  GetUsersListResultModel,
  GetAuthTreeListTreeItem
} from '@/apis/system/model/userModel';
import GTreeUserRole from '../GTreeUserRole/index.vue';
import CBoxTitle from '@/components/CBoxTitle/index.vue';
import { CDrawer } from '@/components/CDrawer';
import { CDetailCellGroup, CDetailCellItem } from '@/components/CDetailGroup';

interface UserDetailPropsType {
  visible: boolean;
  info: undefined | GetUsersListResultModel[0];
}
const props = withDefaults(defineProps<UserDetailPropsType>(), {});
const emit = defineEmits(['update:visible']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch([() => dialogVisible.value, () => props.info], ([visible, info]) => {
  console.log('visible', visible, info);
  if (visible && info) {
    getTree();
  }
});
const treeProps = {
  label: 'organizationName',
  disabled: 'id'
};
const treeData = ref<GetAuthTreeListTreeItem[]>([]);
const checkedKeys = ref<number[]>([]);
const loading = ref(false);
function getTree() {
  loading.value = true;
  checkedKeys.value = [];
  console.log('detail getTree');
  getUserTreeList({ userId: props.info?.userId })
    .then(res => {
      traverseTree(res);
      treeData.value = res;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
// 获取选中的组织
function traverseTree(nodes: GetAuthTreeListTreeItem[]) {
  for (let i = 0; i < nodes.length; i++) {
    let node = nodes[i];
    if (!node) {
      return;
    }
    if (node.belong) {
      checkedKeys.value.push(node.id);
    }
    if (node.children && node.children.length > 0) {
      traverseTree(node.children);
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-user-container {
  height: 100%;
  overflow: hidden;
}
.user-detail-divider {
  margin: 10px 0 9px;
  border-color: #f2f3f5;
}
.mainTb {
  font-size: 14px;
  overflow: auto;
}
.user-tree-wrapper {
  padding: 4px 20px;
}
</style>
